<template>
  <div class="box">
    <!-- 轮播图 -->
    <el-carousel height="300px" :interval="4000" type="card">
      <el-carousel-item>
        <img src="../../assets/runchen_02.jpg" alt="" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="../../assets/residence-kv.jpg" alt="" />
      </el-carousel-item>
      <el-carousel-item>
        <img src="../../assets/properties-1.jpg" alt="" />
      </el-carousel-item>
    </el-carousel>

    <h1>房产分类</h1>

    <el-row>
      <el-col :span="8" v-for="item in categoryList" :key="item.id">
        <el-card shadow="hover"
          :body-style="{ padding: '0px' }"
          @click.native="$router.push(`/property/${item.id}`)"
        >
          <img :src="item.image" class="image" />
          <div>
            <h3>{{ item.title }}</h3>
            <span>{{ item.desc }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 分页器 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="currentChange"
      :page-size="limit"
      :current-page="currentPage"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getCategory, getCategoryCount } from "@/api/category";

export default {
  data() {
    return {
      currentPage:1,
      limit: 6,
      start: 0,
      total: 0,
      categoryList: [],
    };
  },
  created() {
    this.getCategoryList();
  },
  methods: {
    async getCategoryList() {
      const res = await getCategory({
        _limit: this.limit,
        _start: this.start,
      });
      // console.log(37, res.data);
      this.categoryList = res.data;
      const request = await getCategoryCount();
      console.log(request, 22);
      this.total = request.data;
    },
    currentChange(val) {
      this.currentPage=val
      this.start = val *6-6;
      this.getCategoryList();
    },
  },
};
</script>

<style scoped>
.box {
  background-color: rgba(169, 169, 169, 0.058);
}
img {
  width: 500px;
  height: 300px;
}
.el-carousel {
  margin-top: 30px;
  margin-bottom: 30px;
}

.content {
  margin-top: 50px;
}
.el-card {
  width: 300px;
  height: 300px;
  margin: 20px auto;
  background-color: rgb(255, 255, 255);
}
.image {
  width: 300px;
  height: 200px;
}
</style>
